 <template>
  <div>
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <span class="total">
            订单数量：{{orderNum}}
          </span>
          <span class="orderTotal">
            订单总金额：{{orderMoneyA}}
          </span>
          <span class="orderTotal">
            退款/售后订单数量：{{refundsNum}}
          </span>
          <span class="orderTotal">
            退款/售后率：{{refundsRatio/len}}%
          </span>
          <span class="orderTotal">
            确认退款订单数量：{{conRefundsNum}}
          </span>
          <span class="orderTotal">
            确认退款率：{{conRefundsRatio/len}}%
          </span>
        </el-card>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="storeId"
        label="商户ID"
        width="120">
      </el-table-column>
      <el-table-column
        prop="storeName"
        label="商户名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="industry"
        label="行业">
      </el-table-column>
    <el-table-column
        prop="orderAmount"
        label="订单总数量">
      </el-table-column>
    <el-table-column
        prop="orderMoney"
        label="订单总金额">
      </el-table-column>
    <el-table-column
        prop="refundsAmount"
        label="退款/售后订单数量">
      </el-table-column>
      <el-table-column
        prop="refundsRate"
        label="退款/售后率 %">
      </el-table-column>
      <el-table-column
        prop="confirmRefundsAmount"
        label="确认退款订单数量">
      </el-table-column>
    <el-table-column
        prop="confirmRefundsMoney"
        label="确认退款金额">
      </el-table-column>
    <el-table-column
        prop="confirmRefundsRate"
        label="确认退款率 %">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getOrderCount} from '@/api/order'
export default {
  created(){
    this.getOrderCount()
  },
  data () {
    return {
      tableData: [],
      orderNum:0,
      orderMoneyA:0,
      refundsNum:0,
      refundsRatio:0,
      conRefundsNum:0,
      conRefundsRatio:0,
      len:1
      // [{
      //   storeId: '3283928081',
      //   storeName: '美宜佳-保利店',
      //   industry: '便利百货',
      //   orderAmount: 300,
      //   orderMoney: 9099887,
      //   refundsAmount: 3455,
      //   refundsRate: 5.629,
      //   confirmRefundsAmount: 2371,
      //   confirmRefundsMoney: 86241,
      //   confirmRefundsRate: 4.232
      // }]
    }
  },

  methods: {
    async getOrderCount(){
      this.tableData=await getOrderCount()
      var len=this.tableData.length
      this.orderNum=this.totalCom("orderAmount")
      this.orderMoneyA=this.totalCom("orderMoney")
      this.refundsNum=this.totalCom("refundsAmount")
      this.refundsRatio=this.totalCom("refundsRate")
      this.conRefundsNum=this.totalCom("confirmRefundsAmount")
      this.conRefundsRatio=this.totalCom("confirmRefundsRate")
    },
    totalCom (pro) {
      var sum=0
      this.tableData.forEach(item => {
        item[pro]=Number(item[pro])
        return sum += item[pro]; 
      })
      return sum
    }

  }
}
</script>

<style>
.el-card__body {
  /* padding:20px 30px; */
  display: flex;
justify-content: space-between;
}

.el-main{
  line-height: 25px;
}
.el-col-8{
  width: 100%;
}
.el-row{
margin-bottom: 8px;
}

.el-table .cell{
    text-align: center;
}
.el-table__header-wrapper{
    line-height: 60px;
}

</style>
